<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>各年龄段比例统计</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/chalk.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>

<body>
  <div style="height:500px;"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    mCharts.showLoading() // 在获取数据之前, 显示加载动画

    var option = {
  title: {
    text: '各年龄段人数比例统计'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}'
  },
  
  legend: {
    data: [] // 初始化为空，后面动态设置
  },
  series: [
    {
      type: 'pie', // 必须加上
      name: '年龄段',
      left: '10%',
      width: '80%',
      label: {
        formatter: '{b}'
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        opacity: 0.7
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b} {c}'
        }
      },
      data: []
    },
  ]
};
    mCharts.setOption(option)
     mCharts.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts.off('click') // 解绑click的事件

    mCharts.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts.resize()
    }
     //使用jQuery的Ajax请求，通过GET方法从"http://127.0.0.1:9898/data5"获取数据，并根据返回的数据更新图表配置。
    $.get("http://127.0.0.1:9898/data5",function(data,status){
      mCharts.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      // 生成 legend 数据
      var legendData = data.map(item => item.name)
      // 生成 series 数据
      var newArray = data.map(item => ({
        name: item.name,
        value: item.value
      }))
      mCharts.setOption({
        legend: { data: legendData },
        series: [{ data: newArray }]
      })
    })
      
    
     
   
        
      

  </script>
</body>

</html>